<template>
  <div class="mydetail" v-if="data">
    <!-- 分割线 -->
    <div class="mydetail_hr"></div>
    <!-- 侧边栏 -->
    <div class="mydetail_nar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的SN</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mydetail_list">
      <!-- 左侧边栏 -->
      <div class="mydetail_list_left">
        <el-col :span="50">
          <el-menu
            default-active="8"
            class="el-menu-vertical-demo"
            background-color="#f5f5f5"
            text-color="black"
            active-text-color="#29b7b7"
          >
            <a href="javascript:;">我的订单</a>
            <el-menu-item index="1">
              <span slot="title" @click="item='ManageOrder'">订单管理</span>
            </el-menu-item>
            <el-menu-item disabled index="2">
              <span slot="title">国际订单</span>
            </el-menu-item>

            <el-menu-item disabled index="3">
              <span slot="title">他人代订</span>
            </el-menu-item>
            <a href="javascript:;">我的资产</a>
            <el-menu-item index="4">
              <span slot="title">账户余额</span>
            </el-menu-item>
            <el-menu-item index="5">
              <span slot="title">我的代金卷</span>
            </el-menu-item>
            <el-menu-item index="6">
              <span slot="title">我的优惠编码</span>
            </el-menu-item>
            <el-menu-item index="7">
              <span slot="title">我的积分</span>
            </el-menu-item>
            <a href="javascript:;">个人中心</a>
            <el-menu-item index="8" @click="item='MyMsg'">
              <span slot="title">用户信息</span>
            </el-menu-item>
            <el-menu-item index="9">
              <span slot="title">常用租车人</span>
            </el-menu-item>
            <el-menu-item index="10">
              <span slot="title">常用收件信息</span>
            </el-menu-item>
            <el-menu-item index="11">
              <span slot="title">我的发票</span>
            </el-menu-item>
            <el-menu-item index="12">
              <span slot="title">增票资质</span>
            </el-menu-item>
            <el-menu-item index="13">
              <span slot="title">我的违章</span>
            </el-menu-item>
            <el-menu-item index="14">
              <span slot="title">在线投诉</span>
            </el-menu-item>
            <el-menu-item index="15">
              <span slot="title">政企信息</span>
            </el-menu-item>
            <el-menu-item @click="changebar" index="16">
              <span slot="title">申请注销账户</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </div>
      <!-- 内容部分 -->
      <div class="mydetail_list_right">
        <component :data="data" :is="this.item"></component>
      </div>
    </div>
  </div>
</template>

<script>
import ManageOrder from '../components/ManageOrder.vue';
import MyMsg from "../components/MyMsg.vue";
export default {
  components: { MyMsg, ManageOrder },
  data() {
    return {
      item: "MyMsg",
      data:null
    };
  },
  mounted () {
    this.getuserdate();
  },
  methods: {
    changebar(e) {
      // console.log(e.index);
    },
    getuserdate(){
      let userID= sessionStorage.getItem('UserID')
      let params = `Uid=${userID}`
      this.axios.post('/user/usergetdata',params)
      .then(res => {
        // console.log(res.data)
        this.data=res.data.data
      })
    }
  },
};
</script>
<style src="../assets/css/mydetail.css" scoped></style>
<style lang="scss" scoped></style>
